<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue.js事件处理器</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="counter +=1">增加1</button>
        <p>这个按钮被点击了{{counter}}次</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                counter:0
            }
        })
    </script>


<!--    方法调用-->
    <div id="app2">
        <button v-on:click="greet">Greet</button>
    </div>
    <script>
        var app = new Vue({
            el:'#app2',
            data:{
                name:'Vue.js'
            },
            // 在‘methods’对象中定义方法
            methods:{
                greet:function(event){
                    alert('Hello'+this.name+'!')
                    if(event){
                        alert(event.target.tagName)
                    }
                }
            }
        })
        // 也可以使用JavaScript直接调用方法
        // app.greet()
    </script>

<!--    内联JavaScript语句-->
    <div id="app3">
        <button v-on:click="say('hi')">Say hi</button>
        <button v-on:click="say('what')">Say what</button>
    </div>
    <script>
        new Vue({
            el:'#app3',
            methods:{
                say:function(message){
                    alert(message)
                }
            }
        })
    </script>




<!--为v-on提供的事件修饰符-->
<!--    .stop     阻止冒泡-->
<!--    .prevent   阻止默认事件-->
<!--    .capture    阻止捕获-->
<!--    .self       只监听触发该元素的事件-->
<!--    .once       只触发一次-->
<!--    .left       左键事件-->
<!--    .right      右键事件-->
<!--    .middle     中间滚轮事件-->

<!--例：-->
<!--<a v-on:click.stop="stopThis">阻止单击事件冒泡</a>-->
<!--<from v-on:submit.prevent="onSubmit">提交事件不再重载页面</from>-->
</body>
</html>